<template>
  <div class="login-vue" :style="bg">
    <div class="container">
      <p class="title">WELCOME</p>
      <div class="input-c">
        <Input prefix="ios-contact" v-model="account" placeholder="用户名" clearable @on-blur="verifyAccount"/>
        <p class="error">{{accountError}}</p>
      </div>
      <div class="input-c" v-on:keyup.enter="submit">
        <Input type="password" v-model="pwd" prefix="md-lock" placeholder="密码" clearable @on-blur="verifyPwd"/>
        <p class="error">{{pwdError}}</p>
      </div>
      <Button :loading="isShowLoading" class="submit" type="primary" @click="submit">登陆</Button>
      <p class="account"><span @click="register">注册账号</span> | <span @click="forgetPwd">忘记密码</span></p>
    </div>
    <Regist :setVisiable="(v) => {this.registing = v}" :isShow="registing" />
    <FindPassword :setVisiable="(v) => {this.findingPassword = v}" :isShow="findingPassword" />
  </div>
</template>

<script>
import { login } from '../api/auth'
import * as base64 from 'base64-js'
import Regist from './Regist.vue'
import FindPassword from './FindPassword'

export default {
  name: 'login',
  components: {
    Regist,
    FindPassword
  },
  data () {
    return {
      account: '',
      pwd: '',
      accountError: '',
      pwdError: '',
      isShowLoading: false,
      bg: {},
      registing: false,
      findingPassword: false
    }
  },
  created () {
    this.bg.backgroundImage = 'url(' + require('../assets/imgs/bg0' + new Date().getDay() + '.jpg') + ')'
  },
  watch: {
    $route: {
      handler: function (route) {
        this.redirect = route.query && route.query.redirect
      },
      immediate: true
    }
  },
  methods: {
    verifyAccount (e) {
      if (this.account === '') {
        this.accountError = '用户名不能为空'
      } else {
        this.accountError = ''
      }
    },
    verifyPwd (e) {
      if (this.pwd === '') {
        this.pwdError = '密码不能为空'
      } else {
        this.pwdError = ''
      }
    },
    register () {
      this.registing = true
    },
    forgetPwd () {
      this.findingPassword = true
    },
    submit () {
      this.isShowLoading = true
      login({
        username: this.account,
        email: this.account,
        password: this.pwd
      }).then(res => {
        const { data } = res
        if (data && data.token) { // 登录成功
          localStorage.setItem('token', data.token)
          localStorage.setItem('userName', data.username)
          if (data.avatar) {
            const base64Str = base64.fromByteArray(data.avatar.data)
            localStorage.setItem('userImg', `data:image/png;base64,${base64Str}`)
          }
          location.href = '/'
          console.log(this.redirect)
          this.isShowLoading = false
        } else {
          // 登录失败
        }
      }).catch(err => {
        if (err.response) {
          this.$Notice.error({
            title: '登录失败',
            desc: err.response.data.message,
            duration: 5
          })
        }
      })
      this.isShowLoading = false
    }
  }
}
</script>

<style>
.login-vue {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
}
.login-vue .container {
    background: rgba(255, 255, 255, .5);
    width: 300px;
    text-align: center;
    border-radius: 10px;
    padding: 30px;
}
.login-vue .ivu-input {
    background-color: transparent;
    color: #fff;
    outline: #fff;
    border-color: #fff;
}
.login-vue ::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color: rgba(255, 255, 255, .8);
}
.login-vue :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: rgba(255, 255, 255, .8);
}
.login-vue ::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: rgba(255, 255, 255, .8);
}
.login-vue :-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: rgba(255, 255, 255, .8);
}
.login-vue .title {
    font-size: 16px;
    margin-bottom: 20px;
}
.login-vue .input-c {
    margin: auto;
    width: 200px;
}
.login-vue .error {
    color: red;
    text-align: left;
    margin: 5px auto;
    font-size: 12px;
    padding-left: 30px;
    height: 20px;
}
.login-vue .submit {
    width: 200px;
}
.login-vue .account {
    margin-top: 30px;
}
.login-vue .account span {
    cursor: pointer;
}
.login-vue .ivu-icon {
    color: #eee;
}
.login-vue .ivu-icon-ios-close-circle {
    color: #777;
}
</style>
